window.onload = async function () {
  const res = await axios({
    url: '/dashboard',
    method: 'get',
    // 额外的设置请求头
    // 把登录之后的token 带到服务器
    // 接口/后端去校验 token是否正确
    // headers: {
    //   // msg这个值 只是用来的测试的 没有任何意义
    //   msg: 'good good study day day up',
    //   // 缓存中获取 token
    //   Authorization: localStorage.getItem('token'),
    // },
  })
  console.log('res:', res)

  // 主页一进来就要展示数据，所以进来就要发请求，如果没有登录就拦截出去登录
  const {
    data: { overview },
  } = res
  // 使用for in循环来获取渲染数据
  // for (let key in overview) {
  //   document.querySelector(`span[name="${key}"]`).innerHTML=overview[key]
  // }

  // 这个是标签选择器，获取元素修改数据
  document.querySelector(`span[name="salary"]`).innerHTML = overview.salary
  document.querySelector(`span[name="student_count"]`).innerHTML =
    overview.student_count
  document.querySelector(`span[name="age"]`).innerHTML = overview.age
  document.querySelector(`span[name="group_count"]`).innerHTML =
    overview.group_count

  // const { data: { year } } = res
  myYear(res.data.year)
  setSalary(res.data.salaryData)
  setTeam(res.data.groupData)
  initMapChart(res.data.provinceData)
  salaryBG(res.data.salaryData)
}
// 创建折线图的函数
const myYear = (data) => {
  const lineSalary = document.querySelector('#line')
  const myChart = echarts.init(lineSalary)
  const option = {
    // 标题组件
    title: {
      // 标题组件
      text: '2022全学科薪资走势', // 主标题文本
      top: `4%`,
      left: '2%',
    },
    // x轴设置
    xAxis: {
      type: 'category',
      data: data.map((item) => item.month),
      //设置坐标轴轴线样式（颜色和虚线）
      axisLine: {
        lineStyle: {
          color: '#ccc',
          type: 'dashed',
        },
      },
      //坐标轴标签的颜色
      axisLabel: {
        color: '#999',
      },
    },

    // y轴设置
    yAxis: {
      type: 'value',
      //分隔线的样式
      splitLine: {
        lineStyle: {
          type: 'dashed',
        },
      },
    },

    //鼠标移动出现提示
    tooltip: {
      trigger: 'axis',
    },

    //设置绘图网格
    grid: {
      //网格距离上方距离
      top: '20%',
    },
    //设置折线图为渐变颜色
    color: [
      {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 1,
        y2: 0,
        colorStops: [
          {
            offset: 0,
            color: '#499FEE', // 0% 处的颜色
          },
          {
            offset: 1,
            color: '#5D75F0', // 100% 处的颜色
          },
        ],
      },
    ],
    series: [
      {
        // name: '销量2',用于tooltip的显示，legend 的图例筛选
        data: data.map((item) => item.salary),
        type: 'line',
        smooth: true,
        lineStyle: {
          width: 6,
        },
        //标记的大小
        symbolSize: 10,
        //设置区域的渐变颜色
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: '#499FEE',
            },
            {
              offset: 0.8,
              color: 'rgba(255,255,255,0.2)',
            },
            {
              offset: 1,
              color: 'rgba(255,255,255,0)',
            },
          ]),
        },
      },
    ],
  }

  option && myChart.setOption(option)
}
// 创建饼图的函数
const setSalary = (data) => {
  const lineSalary = document.querySelector('#salary')
  const myChart = echarts.init(lineSalary)
  const option = {
    //设置图表的标题和字体样式
    title: {
      text: '班级薪资分布',
      top: 15,
      left: 10,
      textStyle: {
        fontSize: 16,
      },
    },
    //图表的图例
    legend: {
      bottom: '6%',
      left: 'center',
    },
    color: ['#FDA224', '#5097FF', '#3ABCFA', '#34D39A'],
    // 鼠标放上去会显示提示
    tooltip: {
      trigger: 'item',
    },
    // 控制图标的内容的数据和样式
    series: [
      {
        name: '班级薪资分布',
        type: 'pie',
        //半径:radius 内半径，外半径
        radius: ['40%', '50%'],
        //中心点坐标
        center: ['50%', '45%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2,
        },
        label: {
          // show: true,
          // position: 'outside'
          show: false,
          position: 'center',
        },
        emphasis: {
          label: {
            show: false,
            fontSize: '40',
            fontWeight: 'bold',
          },
        },
        labelLine: {
          // show: true
          show: false,
        },
        data: data.map((item) => {
          return {
            name: item.label,
            value: item.b_count + item.g_count,
          }
        }),
        // data: data.map(item=>item.label)
      },
    ],
  }

  option && myChart.setOption(option)
}
// 创建柱状图的函数

const setTeam = (data) => {
  console.log(data)
  const lineSalary = document.querySelector('#lines')
  const myChart = echarts.init(lineSalary)
  const option = {
    tooltip: {
      trigger: 'item',
    },
    color: [
      {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: '#34D39A', // 0% 处的颜色
          },
          {
            offset: 1,
            color: 'rgba(52,211,154,0.2)', // 100% 处的颜色
          },
        ],
      },
      {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: '#499FEE', // 0% 处的颜色
          },
          {
            offset: 1,
            color: 'rgba(73,159,238,0.2)', // 100% 处的颜色
          },
        ],
      },
    ],
    grid: {
      left: 70,
      top: 30,
      right: 30,
      bottom: 50,
    },
    xAxis: {
      type: 'category',
      // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      data: data['1'].map((item) => {
        return item.name
      }),
      axisLine: {
        lineStyle: {
          color: '#ccc',
          type: 'dashed',
        },
      },
      axisLabel: {
        color: '#999',
      },
    },
    yAxis: {
      type: 'value',
      splitLine: {
        lineStyle: {
          type: 'dashed',
        },
      },
    },
    series: [
      {
        data: data['1'].map((item) => {
          return item.hope_salary
        }),
        type: 'bar',
        name: '期望薪资',
      },
      {
        data: data['1'].map((item) => {
          return item.salary
        }),
        type: 'bar',
        name: '就业薪资',
      },
    ],
  }
  myChart.setOption(option)
  const btns = document.querySelector('#btns')
  btns.addEventListener('click', function (e) {
    if (e.target.tagName === `BUTTON`) {
      const group = e.target.innerHTML
      // console.log(group);
      document.querySelector('.btn-blue').classList.remove('btn-blue')
      e.target.classList.add('btn-blue')
      option.xAxis.data = data[group].map((item) => {
        return item.name
      })
      option.series[0].data = data[group].map((item) => {
        return item.hope_salary
      })
      option.series[1].data = data[group].map((item) => {
        return item.salary
      })
      myChart.setOption(option)
    }
  })
}
// 创建地图的函数
const initMapChart = (provinceData) => {
  const myEchart = echarts.init(document.querySelector('#map'))
  // 方法一：
  const areaarr = provinceData.map((item) => {
    if (item.name === '新疆维吾尔自治区') {
      item.name = '新疆'
      return { name: item.name, value: item.value }
    }
    if (item.name === '西藏自治区') {
      item.name = '西藏'
      return { name: item.name, value: item.value }
    }
    if (item.name === '内蒙古自治区') {
      item.name = '内蒙古'
      return { name: item.name, value: item.value }
    }
    if (item.name === '宁夏回族自治区') {
      item.name = '宁夏'
      return { name: item.name, value: item.value }
    }
    if (item.name === '广西壮族自治区') {
      item.name = '广西'
      return { name: item.name, value: item.value }
    }
    item.name = item.name.replace(/省/g, '')
    return { name: item.name, value: item.value }
    // return {
    // name :item.name.replace(/省|自治区|回族|壮族|维吾尔/g, ''),
    // value:item.name} 
  })
  // 方法二：
  // const areaarr=JSON.parse(JSON.stringify(provinceData).replace(/省|自治区|回族|壮族|维吾尔/g,''))
  console.log(areaarr)
  const dataList = [
    { name: '南海诸岛', value: 0 },
    { name: '北京', value: 0 },
    { name: '天津', value: 0 },
    { name: '上海', value: 0 },
    { name: '重庆', value: 0 },
    { name: '河北', value: 0 },
    { name: '河南', value: 0 },
    { name: '云南', value: 0 },
    { name: '辽宁', value: 0 },
    { name: '黑龙江', value: 0 },
    { name: '湖南', value: 0 },
    { name: '安徽', value: 0 },
    { name: '山东', value: 0 },
    { name: '新疆', value: 0 },
    { name: '江苏', value: 0 },
    { name: '浙江', value: 0 },
    { name: '江西', value: 0 },
    { name: '湖北', value: 0 },
    { name: '广西', value: 0 },
    { name: '甘肃', value: 0 },
    { name: '山西', value: 0 },
    { name: '内蒙古', value: 0 },
    { name: '陕西', value: 0 },
    { name: '吉林', value: 0 },
    { name: '福建', value: 0 },
    { name: '贵州', value: 0 },
    { name: '广东', value: 0 },
    { name: '青海', value: 0 },
    { name: '西藏', value: 0 },
    { name: '四川', value: 0 },
    { name: '宁夏', value: 0 },
    { name: '海南', value: 0 },
    { name: '台湾', value: 0 },
    { name: '香港', value: 0 },
    { name: '澳门', value: 0 },
  ]
  areaarr.forEach(item => {
    dataList.forEach(data => { 
      item.name===data.name&&(data.value=item.value)
    })
  });
 console.log(dataList);
 
  let option = {
    title: {
      text: '籍贯分布',
      top: 10,
      left: 10,
      textStyle: {
        fontSize: 16,
      },
    },
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c} 位学员',
      borderColor: 'transparent',
      backgroundColor: 'rgba(0,0,0,0.5)',
      textStyle: {
        color: '#fff',
      },
    },
    visualMap: {
      min: 0,
      max: 6,
      left: 'left',
      bottom: '20',
      text: ['6', '0'],
      inRange: {
        color: ['#ffffff', '#0075F0'],
      },
      show: true,
      left: 40,
    },
    geo: {
      map: 'china',
      roam: false,
      zoom: 1.0,
      label: {
        normal: {
          show: true,
          fontSize: '10',
          color: 'rgba(0,0,0,0.7)',
        },
      },
      itemStyle: {
        normal: {
          borderColor: 'rgba(0, 0, 0, 0.2)',
          color: '#e0ffff',
        },
        emphasis: {
          areaColor: '#34D39A',
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          shadowBlur: 20,
          borderWidth: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
        },
      },
    },
    series: [
      {
        name: '籍贯分布',
        type: 'map',
        geoIndex: 0,
        data: dataList,
      },
    ],
  }
  myEchart.setOption(option)
}
// 创建男女薪资饼状图的函数
const salaryBG = (data) => {
  const datas = data.map(item => { 
    return {name:item.label,value:item.b_count}
  })
  const datas1= data.map(item => { 
    return {name:item.label,value:item.g_count}
  })
  const arr=[]
   arr.push(datas)
arr.push(datas1)
  const chartDom = document.querySelector('#gender')
  const myChart = echarts.init(chartDom)
  myChart.setOption(
  // myChart.setOption(
    // option = {
    // title: [
    //   {
    //     text: '男女薪资分布',
    //     left: '5%',
    //     top: '5%',
    //     textStyle: {
    //       color: '#000',
    //       fontWeight: 'bold',
    //       fontSize: 20,
    //     },
    //   },
    //   {
    //     text: '男生',
    //     left: '42%',
    //     top: '45%',
    //     textStyle: {
    //       color: '#000',
    //       fontWeight: 'bold',
    //       fontSize: 15,
    //     },
    //   },
    //   {
    //     text: '女生',
    //     left: '42%',
    //     top: '90%',
    //     textStyle: {
    //       color: '#000',
    //       fontWeight: 'bold',
    //       fontSize: 15,
    //     },
    //   },
    // ],
    // color: ['#FDA224', '#5097FF', '#3ABCFA', '#34D39A'],
    // tooltip: {
    //   trigger: 'item',
    // },
    // series: [
    //   {
    //     type: 'pie',
    //     radius: 50,
    //     radius: ['20%', '30%'],
    //     center: ['50%', '30%'],
    //     datasetIndex: 1, // data: [{name:'1万以下',value: 4},...]
    //     data: data.map((item) => ({ name: item.label, value: item.b_count })),
    //   },
    //   {
    //     type: 'pie',
    //     radius: 50,
    //     radius: ['20%', '30%'],
    //     center: ['50%', '70%'],
    //     datasetIndex: 2, // data: [{name:'1万以下',value: 4},...]
    //     data: data.map((item) => ({ name: item.label, value: item.g_count })),
    //   },
    // ],
    // }
    option = {
      title: [
        {
         text: '男女薪资分布',
        left: '5%',
        textStyle: {
          color: '#333',
          fontWeight: 'bolder',
          fontSize: 16
        },
      },
      {
         text: '男生',
        left: '45%',
         top:'45%',
        textStyle: {
          color: '#333',
          fontWeight: 'bolder',
          fontSize: 16
        },
      },
      {
         text: '女生',
        left: '45%',
         top:'95%',
        textStyle: {
          color: '#333',
          fontWeight: 'bolder',
          fontSize: 16
        },
      },
      ],
       
      series: arr.map(function (data, idx) {
        var top = idx * 50;
        return {
          type: 'pie',
          radius: [35, 60],
          top: top + '%',
          height: '50%',
          left: 'center',
          width: 300,
          itemStyle: {
            borderColor: '#fff',
            borderWidth: 0
          },
          label: {
            alignTo: 'edge',
            // formatter: '{name|{b}}\n{time|{c} 小时}',
            minMargin: 5,
            edgeDistance: 10,
            lineHeight: 15,
            rich: {
              time: {
                fontSize: 10,
                color: '#999'
              }
            }
          },
          labelLine: {
            length: 10,
            length2: 0,
            maxSurfaceAngle: 80
          },
          data: data
        }
      })
    },
  )
}
